<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器、字体、背景、浮动和定位</title>
    <link rel="shortcut icon" href="../../../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="banner"></div>
    <div class="selector">
        <h2>相邻选择器 p + p</h2>
        <div class="adjacent">
            <p>&lt;p&gt;赵客缦胡缨，吴钩霜雪明。&lt;/p&gt;</p>
            <p>&lt;p&gt;银鞍照白马，飒沓如流星。&lt;/p&gt;</p>
            <h3>&lt;h3&gt;十步杀一人，千里不留行。&lt;/h3&gt;</h3>
            <p>&lt;p&gt;事了拂衣去，深藏身与名。&lt;/p&gt;</p>
            <h3>&lt;h3&gt;闲过信陵饮，脱剑膝前横。&lt;/h3&gt;</h3>
            <p>&lt;p&gt;将炙啖朱亥，持觞劝侯嬴。&lt;/p&gt;</p>
            <p>&lt;p&gt;三杯吐然诺，五岳倒为轻。&lt;/p&gt;</p>
        </div>
        <h2>兄弟选择器 p ~ p，有点类似 nextElementSibling</h2>
        <div class="brother">
            <p>&lt;p&gt;眼花耳热后，意气素霓生。&lt;/p&gt;</p>
            <p>&lt;p&gt;救赵挥金锤，邯郸先震惊。&lt;/p&gt;</p>
            <h3>&lt;h3&gt;千秋二壮士，烜赫大梁城。&lt;/h3&gt;</h3>
            <p>&lt;p&gt;纵死侠骨香，不惭世上英。&lt;/p&gt;</p>
            <h3>&lt;h3&gt;谁能书阁下，白首太玄经。&lt;/h3&gt;</h3>
            <p>&lt;p&gt;托身白刃里，杀人红尘中。当朝揖高义，举世称英雄。&lt;/p&gt;</p>
            <p>&lt;p&gt;抽刀断水水更流，举杯消愁愁更愁。人生在世不称意，明朝散发弄扁舟。&lt;/p&gt;</p>
        </div>
        <h2>属性选择器 p[class*="Li"]、p[class~="Li"]、p[class|="Li"]</h2>
        <div class="attr">
            <p class="Bai Li-">&lt;p class="Bai Li-" &gt;龙马花雪毛，金鞍五陵豪。&lt;/p&gt;</p>
            <p class="Li-Bai">&lt;p class="Li-Bai" &gt;秋霜切玉剑，落日明珠袍。&lt;/p&gt;</p>
            <p class="Li-Bai">&lt;p class="Li-Bai" &gt;斗鸡事万乘，轩盖一何高。&lt;/p&gt;</p>
            <p class="LiBai">&lt;p class="LiBai" &gt;弓摧南山虎，手接太行猱。&lt;/p&gt;</p>
            <p class="LiBai">&lt;p class="LiBai" &gt;酒后竞风采，三杯弄宝刀。&lt;/p&gt;</p>
            <p class="Li Bai">&lt;p class="Li Bai" &gt;杀人如剪草，剧孟同游遨。&lt;/p&gt;</p>
            <p class="Li Bai">&lt;p class="Li Bai" &gt;发愤去函谷，从军向临洮。&lt;/p&gt;</p>
        </div>
        <div class="main"></div>
        <h2>伪类选择器 :not()、:empty、:nth-child()、:nth-of-type()</h2>
        <div class="pseudo">
            <ul>
                <li class="child">叱咤经百战，匈奴尽奔逃。 - li:first-child</li>
                <li class="child">归来使酒气，未肯拜萧曹。 - li:not(:first-child)</li>
                <li class="child">羞入原宪室，荒淫隐蓬蒿。 - li:not(:first-child)</li>
                <li class="child">锦城虽云乐，不如早还家。 - li:last-child</li>
            </ul>
            <ul>
                <li class="empty">天下风云出我辈，一入江湖岁月摧。 - li:empty</li>
                <li class="empty">
                    <!--  -->
                </li>
                <li class="empty">王图霸业谈笑中，不胜人生一场醉。 - li:empty</li>
            </ul>
            <ul>
                <li class="type">提剑跨骑挥鬼雨，白骨如山鸟惊飞。 - :first-of-type</li>
                <li class="type">尘世如潮人如水，只叹江湖几人回。</li>
                <li class="type">天下都游半日功，不须跨凤与乘龙。 - :nth-of-type(3)</li>
                <li class="type">偶因博戏飞神剑，摧却终南第一峰。 - :last-of-type</li>
            </ul>
            <p>朝游北越暮苍梧，袖里青蛇胆气粗。 - p</p>
            <h3>三入岳阳人不识，朗吟飞过洞庭湖。 - h3 p:nth-child(5)无效</h3>
            <p>东山东畔忽相逢，握手丁宁语似钟。 - p p:nth-child(6)</p>
            <h3>剑术已成君把去，有蛟龙处斩蛟龙。 - h3 p:nth-child(7)无效</h3>
            <p>先生先生貌狞恶，拔剑当空气云错。 - p</p>
            <p>连喝三回急急去，欻然空里人头落。 - p</p>
            <p>剑起星奔万里诛，风雷时逐雨声粗。 - p p:nth-of-type(5)</p>
            <p>人头携处非人在，何事高吟过五湖。 - p</p>
        </div>
        <h2>伪元素伪对象选择器 ::after、::before、::first-line、::first-letter、::selection、还有 ::placeholder 等等</h2>
        <div class="pseudo-element">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo maxime aspernatur dolor rem perferendis
                quod quaerat odit ad corporis minima beatae ipsam exercitationem eos incidunt accusamus voluptatum
                perspiciatis provident, architecto voluptatibus necessitatibus consequuntur!</p>
        </div>
    </div>
    <div class="footer"></div>
    <div class="float clearfix">
        <h2>浮动，会影响下面的盒子</h2>
        <div class="float1">float: left</div>
        <div class="float2">float: left</div>
        <div class="float3">float: right</div>
        <h2>浮动，不会影响上面的盒子</h2>
    </div>
    <div class="position">
        <h2>定位</h2>
        <div class="relative">相对定位</div>
        <div class="absolute">绝对定位</div>
        <div class="fixed">固定定位<br> <a href="../../index.html">返回</a></div>
    </div>
</body>

</html>